<template>
  <div class="app-container">
    <el-row :gutter="12">
      <!--左侧--->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <!--左侧顶部简单统计-->
        <el-row :gutter="12">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img class="header-left-content" src="@/assets/prevent/myTaskNum.png" />
              <div class="header-right-content">
                <span>{{ myCheckTastNum + myRectifyTaskNum }}</span>
                <span>待处理任务</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img class="header-left-content" src="@/assets/prevent/myCompleteNum.png" />
              <div class="header-right-content">
                <span>{{ myCompleteTaskNumByCount }}</span>
                <span>已处理任务</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img
                class="header-left-content"
                src="@/assets/prevent/myCompleteRate.png"
              />
              <div class="header-right-content">
                <span>{{ myCompleteTaskRateByCount }}</span>
                <span>排查完成率</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--左侧任务栏 -->
        <el-row :gutter="12">
          <!--隐患排查任务-->
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-card class="box-card" style="height: 257px">
              <template #header>
                <div class="card-header">
                  <el-badge :value="myCheckTastNum" class="item">
                    <el-button>我的排查任务</el-button>
                  </el-badge>
                  <router-link to="/workbench/check/index">
                    <span style="color: #0087ff; font-size: 12px">查看更多...</span>
                  </router-link>
                </div>
              </template>
              <div class="body">
                <div
                  class="task-list"
                  v-for="(item, index) in myCheckTaskList"
                  :key="index"
                >
                  <svg-icon icon-class="documentation" class="task-document" />
                  <div class="task-list-content">
                    <span>{{ item.listName }}</span>
                    <span>截止时间:{{ parseTime(item.endDate) }}</span>
                  </div>
                  <el-button
                    type="primary"
                    @click="handleMyCheck(item)"
                    class="task-handle"
                    >去处理</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
          <!--隐患整改任务-->
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-card class="box-card" style="height: 257px">
              <template #header>
                <div class="card-header">
                  <el-badge :value="myRectifyTaskNum" class="item">
                    <el-button>我的整改任务</el-button>
                  </el-badge>
                  <router-link to="/workbench/rectify/index">
                    <span style="color: #0087ff; font-size: 12px">查看更多...</span>
                  </router-link>
                </div>
              </template>
              <div class="body">
                <div
                  class="task-list"
                  v-for="(item, index) in myRectifyTaskList"
                  :key="index"
                >
                  <svg-icon icon-class="documentation" class="task-document" />
                  <div class="task-list-content">
                    <span>{{ item.dangerName }}</span>
                    <span
                      >整改期限:{{
                        item.registTime ? parseTime(item.registTime) : "---"
                      }}</span
                    >
                  </div>
                  <el-button
                    type="primary"
                    @click="handleMyRectify(item)"
                    class="task-handle"
                    >去处理</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!--个人中心--->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="user-workbench-center">
              <img :src="userStore.avatar" class="workbench-avatar" />
              <div>
                <span>{{ userStore.name }}</span>
                <span>
                  {{ state.user.dept ? state.user.dept.deptName : "----" }}
                </span>
                <!-- <span>
                  联系电话：
                  {{ state.user.phone ? state.user.phone : "----" }}
                </span>
                <span>
                  登录IP：
                  {{ state.user.loginIp ? state.user.loginIp : "----" }}
                </span> -->
                <span>
                  登录时间：
                  {{ state.user.loginDate ? parseTime(state.user.loginDate) : "----" }}
                </span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <el-badge :value="12" class="item">
                <el-button>我的消息</el-button>
              </el-badge>
            </div>
          </template>
          <div>
            <div class="task-list" v-for="index of 3" :key="index">
              <svg-icon icon-class="documentation" class="task-document" />
              <div class="task-list-content">
                <span>维修车间的车间的砂轮机漏电待您分配</span>
                <span>整改期限:2023-08-18 18:28:19</span>
              </div>
              <el-button type="primary" class="task-handle">去处理</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Workbench">
import useUserStore from "@/store/modules/user";
import { getUserProfile } from "@/api/system/user";
import { listMyCheckTask } from "@/api/prevent/workbench/myCheck";
import { listMyRectifyTask } from "@/api/prevent/workbench/myRectify";
import {
  getMyCheckTaskCompleteRate,
  getMyCheckTaskCompleteNum,
  getMyCheckTaskHandleNum,
} from "@/api/prevent/workbench/index";
const userStore = useUserStore();
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
});
const myCheckTaskList = ref([]); //我的未处理排查任务列表
const myRectifyTaskList = ref([]); //我的未处理整改任务列表
const myCheckTastNum = ref(0); //我的排查任务数目
const myRectifyTaskNum = ref(0); //我的整改任务数目
const myCompleteTaskNumByCount = ref(0); //统计我的完成任务
const myCompleteTaskRateByCount = ref("0%"); //统计我的任务完成率
const router = useRouter();
/** 获取我的排查任务 */
function getMyChcekTaskList() {
  listMyCheckTask({ current: 1, size: 10, checkStatus: 3 }).then((response) => {
    if (response.data.dataList.length > 3) {
      myCheckTaskList.value = response.data.dataList.splice(0, 3);
    } else {
      myCheckTaskList.value = response.data.dataList;
    }
    myCheckTastNum.value = response.data.totalNum;
  });
}
/** 获取我的隐患排查任务 */
function getMyRectifyTask() {
  listMyRectifyTask({ current: 1, size: 10 }).then((response) => {
    if (response.data.dataList.length > 3) {
      myRectifyTaskList.value = response.data.dataList.splice(0, 3);
    } else {
      myRectifyTaskList.value = response.data.dataList;
    }

    myRectifyTaskNum.value = response.data.totalNum;
  });
}
/** 处理排查任务 */
function handleMyCheck(row) {
  router.push("/workbench/check/handle/" + row.taskId);
}
/** 处理整改任务 */
function handleMyRectify(row) {
  router.push("/workbench/rectify/handle/" + row.processId);
}

function getUser() {
  getUserProfile().then((response) => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
}

/** 获取我完成任务的数量 */
function getMyTaskNum() {
  getMyCheckTaskCompleteNum().then((res) => {
    myCompleteTaskNumByCount.value = res.data;
  });
}
/** 获取我的任务完成率 */
function getMyTaskRate() {
  getMyCheckTaskCompleteRate().then((res) => {
    myCompleteTaskRateByCount.value = res.data;
  });
}
/** 获取我的未完成任务数量 */
function getMyHandleNum() {
  getMyCheckTaskHandleNum().then((res) => {
    console.log(res.data);
  });
}
getMyTaskNum();
getMyTaskRate();
//getMyHandleNum();
getUser();
//console.log(state);
getMyChcekTaskList();
getMyRectifyTask();
</script>
<style scoped lang="scss">
.task-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #f3f8ff;
  margin: 4px 5px;
  align-items: center;
  border-radius: 5px;
  padding: 0 16px;
  height: 50px;
}
.task-list-content {
  display: flex;
  flex-direction: column;
  width: 65%;

  & span:first-child {
    font-size: 12px;
    color: #333333;
  }
  & span:last-child {
    font-size: 10px;
    color: #999999;
  }
}
.task-handle {
  float: right;
}
.task-document {
  color: #0087ff;
  background-color: #cbe5fd;
}

.user-workbench-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #edf7ff;
  padding: 0 16px;
  height: 96px;
  & div {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    & span:last-child {
      color: #999999;
      font-size: 12px;
      line-height: 17px;
    }
    & span:first-child {
      color: #2c2c2c;
      font-size: 18px;
      line-height: 25px;
      font-weight: 500;
    }
    & span:nth-child(2) {
      color: #2c2c2c;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
.workbench-avatar {
  height: 64px;
  width: 64px;
  border-radius: 50%;
}
</style>
